window.onload = function() {
	$.ajax({
		url: "v1/users/searchicon",
		type: "post",
		async: false,
		success: function(data) {
			if (data.status == 200) {
				// console.log(data.data)
				$('#imga').attr('src', data.data[0].url)

			} else {
				alert('加载失败');
			}

		},
		error: function(err) {
			console.log(err);
		},
	})
}

//$(document).ready(function(){})的简写
$(function(){
	
	
	//开始答题
	$('#start').click(function(event) {
		event.preventDefault()
		$('#test').show();
		$('#history1').hide();
		$('#starttest1').hide();
		$('#testhistory1').hide();
		$('#aboutme1').hide();
		$('#callme1').hide();
		$('#myinfo1').hide();
		$.ajax({
			url: "v1/students/select",
			type: "post",
			async: false,
			success: function(data) {
				//console.log(data.data)
				var arr = [] //定义数组
				var brr = []
				var p = 0; //题号
				document.getElementById('question').innerHTML =
					`<span style="color:red">第${p+1}题：</span>` + data.data[p].tm
	
				//下一题
				$('#btn').click(function() {
					p++
	
					//当用户点击答题卡上题号时,比如已经选到了50题我回到第1题,此时已经数组中已有前50题的选项，我点下一题，把数组的值显示到界面，避免重选
					if (arr[p]) { //因为p+1了所以这里为p  如果数组的当前下标有值
						$('input[name=name][value = ' + arr[p] + ']').prop('checked',
							true); //那么JQUERY根据值将input控件选中！
					} else { //否则清除选中状态
						$('input[name=name]').prop('checked', false)
					}
	
					if (p > 99) {
						alert('这已经是最后一题了')
						p = 99;
						$('input[name=name][value = ' + arr[p] + ']').prop('checked', true);
					} else {
	
						if (p == 100) { //因为data.data[p]下标只能到99
							return
						} else {
							document.getElementById('question').innerHTML =
								`<span style="color:red">第${p+1}题：</span>` + data.data[p].tm
						}
	
					}
	
				})
	
	
				//答题卡
				for (let a = 0; a < data.data.length; a++) { //长度100 0-99
					// var questionId =`<li id=${a} onclick=changecard(${a})>${a}</li>`;
					//       $("#card").append(questionId);
					document.getElementById('card').innerHTML +=
						`<li id=${a} onclick=changecard(${a})>${a+1}</li>` //传递参数a,0-99
				}
	
	
	
				window.changecard = function(a) { //模块里面的定义是个闭包, 外部访问不到,解决方式：把方法挂载在window变量上
					document.getElementById('question').innerHTML =
						`<span style="color:red">第${a+1}题：</span>` + data.data[a].tm
					p = a; //把p值重置为当前下标,避免下一题时不跟随下标,比如你刚开始在第一题，然后你点答题卡来到了第五题,此时下标就应变为4
					if (arr[a]) { //如果数组存在已选择的值
						$('input[name=name][value = ' + arr[a] + ']').prop('checked',
							true); //那么JQUERY根据值将input控件选中！
					} else {
						$('input[name=name]').prop('checked', false)
					}
				}
	
				//单选框改变
				$('input[name=name]').change(function() {
					if (p == 100) { //因为data.data[p]下标只能到99
						return
					} else {
						arr[p] = $('input[name=name]:checked').val(); //把用户选择的值存入当前题的下标
						document.getElementById(`${p}`).style.backgroundColor =
							'green'; //如果选择了则变为绿色
						// console.log(arr)
	
					}
					//把数组的值重新存入新数组，来判断数组是否有empty,empty在遍历后会变为undefined
	
					for (var x = 0; x < arr.length; x++) {
						brr[x] = arr[x]
					}
					// console.log(brr.indexOf(undefined))
					// console.log(brr)
				})
	
	
				//交卷
				$('#submit').click(function() {
					if (arr.length != 100 || brr.indexOf(undefined) != -1) {
						alert('你还有未答的题')
					} else {
						var right = 0,
							error = 0;
						for (var i = 0; i < arr.length; i++) {
							if (arr[i] == data.data[i].jd) { //判断答案的正确与错误
								right++;
							} else {
								error++;
							}
						}
						var score = right;
						var arr1 = [],
							arr2 = []
						for (var j = 0; j < arr.length; j++) {
							arr1.push(data.data[j].tm);
							arr2.push(data.data[j].jd);
						}
						//转为字符串传输 
						var str = arr.join(',');
						var str1 = arr1.join(',');
						var str2 = arr2.join(',');
	
	
	
						$.ajax({
							url: "v1/students/receive",
							type: "post",
							async: false,
							data: {
								str: str, //用户选择的答案
								str1: str1, //题目
								str2: str2, //正确答案
								score: score, //成绩
							},
							success: function(data) { //接收后端发送的数据
								if (data.status == 200) {
									alert('你的得分为：' + score);
									$('#submit').attr('disabled', true)
									location.reload()
								}
							},
							error: function(err) {
								console.log(err);
							},
						})
	
	
					}
				})
	
			},
			error: function(err) {
				console.log(err);
			},
		})
		$('#start').unbind(); //解绑事件,使其在一次访问中只能够点击一次
	
	})
	
	//重新开始
	$('#reload').click(function() {
		location.reload()
	})
	
	
	
	//时区转换,数据库取出的时间日期为utc
	function convertUTCTimeToLocalTime(UTCDateString) {
		if (!UTCDateString) {
			return '-';
		}
	
		function formatFunc(str) { //格式化显示
			return str > 9 ? str : '0' + str //如果>9则为str 否则拼接0
		}
		var date2 = new Date(UTCDateString); //这步是关键
		var year = date2.getFullYear();
		var mon = formatFunc(date2.getMonth() + 1);//月份是0-11所以要+1显示
		var day = formatFunc(date2.getDate());
		var hour = date2.getHours();
		var noon = hour >= 12 ? 'PM' : 'AM';
		hour = hour >= 12 ? hour - 12 : hour;
		hour = formatFunc(hour);
		var min = formatFunc(date2.getMinutes());
		var dateStr = year + '-' + mon + '-' + day + ' ' + noon + ' ' + hour + ':' + min;
		return dateStr;
	}
	
	
	
	
	//历史记录
	$('#history').click(function(event) {
		event.preventDefault();
		$('#history1').show();
		$('#test').hide();
		$('#starttest1').hide();
		$('#testhistory1').hide()
		$('#aboutme1').hide();
		$('#callme1').hide();
		$('#myinfo1').hide();
		$.ajax({
			url: "v1/students/download",
			type: "get",
			async: false,
			success: function(data) {
	
				if (data.status == 200) {
					// console.log(data.data)
	
					for (let a = 0; a < data.data.length; a++) {
						var time = convertUTCTimeToLocalTime(data.data[a].time)
						document.querySelector('#history2>tbody').innerHTML += `
								  <tr>
								    <td><a href="v1/students/download/${data.data[a].filename}">${data.data[a].filename}</a></td>
								    <td>${data.data[a].score}</td>
								    <td>${time}</td>
								  </tr>
								`
	
					}
	
				} else {
					alert('没有历史记录')
				}
	
			},
			error: function(err) {
				console.log(err);
			},
		});
		$('#history').unbind(); //解绑事件,使其在一次访问中只能够点击一次
	})
	
	
	
	
	//参加考试
	$('#starttest').click(function(event) {
		event.preventDefault();
		$('#history1').hide();
		$('#test').hide();
		$('#testhistory1').hide();
		$('#aboutme1').hide();
		$('#callme1').hide();
		$('#myinfo1').hide();
		$('#starttest1').show();
	
	
		//从参加考试后的数据库中获取eid名称，
		var studentexaminfo = (function() {
			var result;
			$.ajax({
				type: 'get',
				url: `/v1/students/studentexaminfo`,
				async: false,
				success: function(data) {
					result = data.data;
				}
			});
			return result;
		})();
	
		//获取发布试卷的eid来显示考试信息
		$.ajax({
			url: "v1/students/examinfo",
			type: "get",
			async: false,
			success: function(data) {
	
				if (data.status == 200) {
					// console.log(data.data)
	
					for (let a = 0; a < data.data.length; a++) {
						var starttime = convertUTCTimeToLocalTime(data.data[a].start_time) //转换时区显示
						var endtime = convertUTCTimeToLocalTime(data.data[a].end_time)
						document.querySelector('#starttest2>tbody').innerHTML += `
								        <tr>
								          <td>${data.data[a].e_name}</td>
								          <td>${starttime}</td>
								          <td>${endtime}</td>
										  <td><button data-id="${data.data[a].eid}" class="btn btn-success" disabled>未开始</button></td>
								        </tr>
								     `
						//可把button变为a
						//推荐用h5自定义属性data-id="data.data[a].eid" data-为前缀(h5标准自定义属性)
						//然后获取data-id this.getAttribute("data-id") 或this.dataset.id(h5标准)
						//属性选择器document.querySelector("[data-id]");
						//属性选择器document.querySelector("[data-id='xxx']");
						// var buttons=   document.querySelectorAll("#starttest2 button");
						// for(var btn of buttons){
						//  btn.onclick=function(){
						// 	 var eid=this.dataset.id;
						// 	 location.href = `/v1/students/test/${eid}`
						//  }
						// }
	
						var new_date = new Date(); //当前时间
						var stime = new Date(data.data[a].start_time); //开始时间
						var etime = new Date(data.data[a].end_time); //结束时间
						if (new_date - stime >= 0 && new_date <
							etime) { //当前时间-开始时间>0表示当前时间已经过了开始时间了并且小于结束时间
							$(`[data-id=${data.data[a].eid}]`).prop('disabled', false);
							$(`[data-id=${data.data[a].eid}]`).html("可考试")
							// document.querySelector(`[data-id="${data.data[a].eid}"]`).innerHTML = "可考试"
						} else if (new_date - etime >= 0) {
							$(`[data-id=${data.data[a].eid}]`).prop('disabled', true);
							$(`[data-id=${data.data[a].eid}]`).html("已结束")
							// document.querySelector(`[data-id="${data.data[a].eid}"]`).innerHTML = "已结束"
						}
	
	
					}
	
					//如果某学生考完试的eid存在则当前eid对应的按钮禁用
					if (studentexaminfo != undefined) {
						for (var aa = 0; aa < studentexaminfo.length; aa++) {
							$(`[data-id=${studentexaminfo[aa].eid}]`).prop('disabled', true);
							$(`[data-id=${studentexaminfo[aa].eid}]`).html('已考试')
							// document.querySelector(`[data-id="${studentexaminfo[aa].eid}"]`).setAttribute('disabled',true)
							// document.querySelector(`[data-id="${studentexaminfo[aa].eid}"]`).innerHTML = "已考试"
	
						}
					}
					
					//点击按钮
					var buttons = document.querySelectorAll("#starttest2 button");
					for (var btn of buttons) {
						btn.onclick = function() {
							let eid = this.dataset.id;//(h5标准获取自定义属性)
							// this.getAttribute("data-id")('核心dom')
							location.href = `/v1/students/test/${eid}`
						}
					}
					
					//jquery方法
					//jquery命名变量约定加$，jqueryapi自带遍历
					// var $buttons=$('#starttest2 button');
					// $buttons.click(function(){
					// 	let eid=$(this).data('id');
					// 	location.href = `/v1/students/test/${eid}`
					// })
					
	
	
				} else {
					alert('你还没有考试信息，请先完善个人信息，如果你已完善个人信息则当前班级暂无考试信息')
				}
	
			},
			error: function(err) {
				console.log(err);
			},
		});
	
	
		$('#starttest').unbind(); //解绑事件,使其在一次访问中只能够点击一次
	})
	
	
	//考试记录
	$('#testhistory').click(function(event) {
		event.preventDefault();
		$('#test').hide();
		$('#history1').hide();
		$('#starttest1').hide();
		$('#aboutme1').hide();
		$('#callme1').hide();
		$('#myinfo1').hide();
		$('#testhistory1').show();
	
		let studentexaminfo = (function() {
			let result;
			$.ajax({
				type: 'get',
				url: `/v1/students/studentexaminfo`,
				async: false,
				success: function(data) {
					result = data.data;
				}
			});
			return result;
		})();
	
		// console.log(studentexaminfo)
		if (studentexaminfo != undefined) {
			for (let a = 0; a < studentexaminfo.length; a++) {
				var time = convertUTCTimeToLocalTime(studentexaminfo[a].time) //转换时区显示
				document.querySelector('#testhistory2>tbody').innerHTML += `
				 	  <tr>
				 	    <td>${studentexaminfo[a].e_name}</td>
				 	    <td>${studentexaminfo[a].score}</td>
				 	    <td>${time}</td>
				 	    <td>${studentexaminfo[a].spendtime}</td>
				 	   <td><button data-id="${studentexaminfo[a].eid}" class="btn btn-success">查看详情</button></td>
				 	  </tr>
				 	`
			}
			
			//点击按钮
			var buttons = document.querySelectorAll("#testhistory2 button");
			for (var btn of buttons) {
				btn.onclick = function() {
					let eid = this.dataset.id;//(h5标准获取自定义属性)
					// this.getAttribute("data-id")('核心dom')
					location.href = `/v1/students/testinfo/${eid}`
				}
			}
			
			//jquery方法
			//jquery命名变量约定加$
			// var $buttons=$('#testhistory2 button');
			// $buttons.click(function(){
			// 	console.log($(this))
			// 	let eid=$(this).data('id');//jquery获取自定义属性值
			// 	location.href = `/v1/students/testinfo/${eid}`
			// })
			
			
		} else {
			alert('你还没有考试信息')
		}
	
		$('#testhistory').unbind(); //解绑事件,使其在一次访问中只能够点击一次
	})
	
	
	
	//个人信息
	$('#myinfo').click(function() {
		event.preventDefault();
		$('#test').hide();
		$('#history1').hide();
		$('#starttest1').hide();
		$('#testhistory1').hide();
		$('#callme1').hide();
		$('#aboutme1').hide();
		$('#myinfo1').show();
	
		//获取学生信息
		let studentinfo = (function() {
			let result;
			$.ajax({
				type: 'get',
				url: `/v1/students/studentinfomation`,
				async: false,
				success: function(data) {
					result = data.data;
				}
			});
			return result;
		})();
		// console.log(studentinfo)
	
		//获取班级信息
		let classroom = (function() {
			let result;
			$.ajax({
				type: 'get',
				url: `/v1/students/selectclassroom`,
				async: false,
				success: function(data) {
					result = data.data;
				}
			});
			return result;
		})();
		// console.log(classroom)
	
		//如果学生信息表有学生信息则显示学生信息界面
		if (studentinfo != undefined) {
			//转换性别显示
			if (studentinfo.sex = 1) {
				studentinfo.sex = '男';
			} else {
				studentinfo.sex = '女'
			}
			studentinfo.birthday = convertUTCTimeToLocalTime(studentinfo.birthday) //时间格式转换
			document.querySelector('#infoshow1>tbody').innerHTML += `
				  <tr>
				    <td>${studentinfo.u_name}</td>
				    <td>${studentinfo.phone}</td>
				    <td>${studentinfo.sex}</td>
				    <td>${studentinfo.birthday}</td>
				    <td>${studentinfo.email}</td>
				    <td>${studentinfo.name}</td>
				    <td>${studentinfo.classroom}</td>
				    <td>${studentinfo.studentid}</td>
				  </tr>
				`
			$('#myinfo1 #infoshow').show();
		} else {
			alert('你还没有个人信息，请填写')
	
	
			//把班级信息渲染到提交界面班级下拉框
			for (let a = 0; a < classroom.length; a++) {
				document.getElementById('class_room').innerHTML += `
					<option  value =${classroom[a].classroom}>${classroom[a].classroom}</option>
					`
			}
	
			//没有则显示提交信息界面
			$('#myinfo1 #infotijiao').show();
	
		}
	
	
	
		//提交信息
		$('#student_submit').click(function() {
			let username = $('#user_name').val();
			let classroom = $('#class_room').val();
			let studentid = $('#student_id').val();
	
			if (username == "" || classroom == "" || studentid == "") {
				alert('请填写完整')
				console.log(studentid)
			} else {
				$.ajax({
					url: "v1/students/studentinfomation",
					type: "post",
					async: false,
					data: {
						name: username,
						classroom: classroom,
						studentid: studentid
					},
					success: function(data) { //接收后端发送的数据
						if (data.status == 200) {
							alert('提交成功');
							$('#myinfo1 #infoshow').hide();
							location.reload();
						}
					},
					error: function(err) {
						console.log(err);
					},
				})
			}
	
		})
	
		//点击修改信息
		$('#update').click(function() {
			//隐藏显示信息界面
			$('#myinfo1 #infoshow').hide();
	
			//把班级信息渲染到修改信息界面班级下拉框
			for (let a = 0; a < classroom.length; a++) {
				document.getElementById('s_class').innerHTML += `
					<option  value =${classroom[a].classroom}>${classroom[a].classroom}</option>
					`
			}
			//把信息贴入input
			document.getElementById('s_uname').value = studentinfo.u_name;
			document.getElementById('s_phone').value = studentinfo.phone;
			document.getElementById('s_sex').value = studentinfo.sex;
			document.getElementById('s_birthday').value = studentinfo.birthday.substr(0,
			10); //因为input date类型赋值需要日期格式为2013-09-05字符串
			document.getElementById('s_email').value = studentinfo.email;
			document.getElementById('s_class').value = studentinfo.classroom;
			document.getElementById('s_name').value = studentinfo.name;
			document.getElementById('s_id').value = studentinfo.studentid;
			//显示修改信息界面
			$('#studentinfoupdate').show();
		})
	
	
	
		//修改信息
		$('#sureupdate').click(function() {
			let phone = $('#s_phone').val();
			let sex = $('#s_sex').val();
			let birthday = $('#s_birthday').val();
			let email = $('#s_email').val();
			let classroom = $('#s_class').val();
			let name = $('#s_name').val();
			let studentid = $('#s_id').val();
	
			//把字符串赋值回去
			if (sex == "男") {
				sex = 1;
			} else {
				sex = 0
			}
	
			if (phone == "" || sex == "" || birthday == "" || email == "" || classroom == "" || name ==
				"" || studentid == "") {
				alert('请填写完整')
				console.log(phone)
				console.log(name)
			} else {
				$.ajax({
					url: "v1/students/studentinfomation",
					type: "put",
					async: false,
					data: {
						phone: phone,
						sex: sex,
						birthday: birthday,
						email: email,
						classroom: classroom,
						name: name,
						studentid: studentid
					},
					success: function(data) { //接收后端发送的数据
						if (data.status == 200) {
							alert('修改成功');
							$('#studentinfoupdate').hide();
							location.reload();
						}
					},
					error: function(err) {
						console.log(err);
						alert('手机号或邮箱或学号已存在')
					},
				})
			}
		})
	
	
		$('#myinfo').unbind(); //解绑事件,使其在一次访问中只能够点击一次
	})
	
	
	
	//关于我们
	$('#aboutme').click(function(event) {
		event.preventDefault();
		$('#test').hide();
		$('#history1').hide();
		$('#starttest1').hide();
		$('#testhistory1').hide();
		$('#callme1').hide();
		$('#myinfo1').hide();
		$('#aboutme1').show();
		$('#aboutme').unbind(); //解绑事件,使其在一次访问中只能够点击一次
	})
	
	
	//联系我们
	$('#callme').click(function(event) {
		event.preventDefault();
		$('#test').hide();
		$('#history1').hide();
		$('#starttest1').hide();
		$('#testhistory1').hide();
		$('#aboutme1').hide();
		$('#myinfo1').hide();
		$('#callme1').show();
	
	
	
		$('#callme').unbind(); //解绑事件,使其在一次访问中只能够点击一次
	})
	
	//给选择框加一个标志位，然后判断标志位进行选中状态的取消
	document.body.onmousedown = function(event) {
		event = event || window.event;
		var target = event.target || event.srcElement;
		if (target.type === 'radio') {
			target.previousValue = target.checked;
		}
	}
	document.body.onclick = function(event) {
		event = event || window.event;
		var target = event.target || event.srcElement;
		if (target.type === 'radio') {
			if (target.previousValue) {
				target.checked = false;
			}
		}
	}
	
	//需设置属性name='',radio的name都要相同
	// $("input:radio").click(function(){
	// var domName = $(this).attr('name');//获取当前单选框控件name 属性值
	// var checkedState = $(this).attr('checked');//记录当前选中状态
	// $("input:radio[name='" + domName + "']").attr('checked',false);//1.
	// $(this).attr('checked',true);//2.
	// if(checkedState == 'checked'){
	// $(this).attr('checked',false); //3.
	// }
	// });
	
	
})
